<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- fill属性是一种表示属性，用于设置SVG形状的颜色。 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <!-- 矩形 -->
        <rect width="300" height="100"
        style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
    </svg>  
    <br/>   
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <!-- 圆形 -->
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>   
    <br/>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <!-- 椭圆 -->
      <ellipse cx="300" cy="80" rx="100" ry="50"
      style="fill:yellow;stroke:purple;stroke-width:2"/>
    </svg> 
    <br/> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <!-- 直线 -->
      <line x1="0" y1="0" x2="200" y2="200"
      style="stroke:rgb(255,0,0);stroke-width:2"/>
    </svg>  
    <br/>  
    <svg height="210" width="500">
        <!-- 多边形 -->
      <polygon points="200,10 250,190 160,210"
      style="fill:lime;stroke:purple;stroke-width:1"/>
      <br/> 
      <polygon points="100,10 40,198 190,78 10,78 160,198"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
      <br/> 
      <polygon points="100,10 40,198 190,78 10,78 160,198"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
      <br/> 
    </svg> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <!-- 多段线 -->
      <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
      style="fill:none;stroke:black;stroke-width:3" />
      <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
      stroke-width="3" fill="none" />
      <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
      stroke-width="3" fill="none" />
      <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
      fill="none" />
      <path d="M 100 350 q 150 -300 300 0" stroke="blue"
      stroke-width="5" fill="none" />
      <!-- Mark relevant points -->
      <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointB" cx="250" cy="50" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
      </g>
      <!-- Label the points -->
      <g font-size="30" font="sans-serif" fill="black" stroke="none"
      text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="250" y="50" dy="-10">B</text>
        <text x="400" y="350" dx="30">C</text>
      </g>
    </svg>    
</body>
</html>

<!-- SVG有一些预定义的形状元素，可被开发者使用和操作：

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path> -->

<!-- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色 -->